import api from '@/pages/MerchantAccount/MerchantUser/UserManagement/request';
import shopListApi from '@/pages/Shop/ListManagement/request';
import { DrawerForm, ProFormSelect } from '@ant-design/pro-components';
import { Button, Form } from 'antd';
import { useMemo, useState } from 'react';

export type FormConfig = { Component: any; props: Record<string, any> };
export interface Props {
  data?: MerchantAccountUserManagementApi.ListResponse;
  onSuccess?: () => void;
  onCancel?: () => void;
}
function ShopListBindForm(props: Props) {
  const { data } = props;

  const [form] = Form.useForm();
  const [formData, setFormData] = useState<any>({});
  const [info, setInfo] = useState<Partial<MerchantAccountUserManagementApi.InfoResponse>>({});
  const [shopList, setShopList] = useState<ShopListManagementApi.ListResponse[]>([]);

  const shopListOptions = useMemo(
    () => shopList.map((item) => ({ label: item.shopName, value: item.id })),
    [shopList],
  );

  const getAllShopClassifyList = async () => {
    const data = await shopListApi.getAllList();
    setShopList(data);
  };
  const getInfo = async (params: MerchantAccountUserManagementApi.InfoParams) => {
    const info = await api.getInfo(params);
    const data = { ...info, shopId: info.shopList.map((item) => item.shopId) };
    setInfo(data);
    form.setFieldsValue(data);
    setFormData(data);
  };

  const onOpenChange = (open: boolean) => {
    if (open) {
      getAllShopClassifyList();
      if (data && data.id) {
        getInfo({ id: data.id });
      }
    } else {
      setInfo({});
      form.resetFields();
      setFormData({});
      props.onCancel?.();
    }
  };
  const onSubmit = async () => {
    const { getMerchantShopDataOutputs } = formData;
    const { id = '' } = info;

    const params: MerchantAccountUserManagementApi.BindParams = {
      id,
      getMerchantShopDataOutputs,
    };
    const data = await api.updateBind(params);
    if (data.success) props.onSuccess?.();
    return data.success;
  };

  return (
    <DrawerForm
      autoFocusFirstInput
      title={`门店授权`}
      form={form}
      drawerProps={{ destroyOnClose: true }}
      resize={{
        maxWidth: window.innerWidth * 0.8,
        minWidth: 400,
        onResize() {},
      }}
      trigger={<Button type="link">门店授权</Button>}
      onOpenChange={onOpenChange}
      onFinish={onSubmit}
    >
      <ProFormSelect
        required
        name="shopId"
        label="门店列表"
        placeholder="请选择门店"
        options={shopListOptions}
        fieldProps={{
          mode: 'multiple',
          value: formData.shopId,
          onChange: (value, options) => {
            // @ts-ignore
            const getMerchantShopDataOutputs = options.map((option: any) => ({
              shopId: option.value,
              shopName: option.label,
            }));
            setFormData({ ...formData, shopId: value, getMerchantShopDataOutputs });
          },
        }}
      />
    </DrawerForm>
  );
}

export default ShopListBindForm;
